<template>
  <el-drawer
    :size="size"
    title="小程序课程预览"
    :visible="show"
    @close="handleClose"
  >
    <!-- 课程首页 -->
    <div
      v-if="step == 1"
      style="
        margin: 40px;
        border: 1px solid #eeeeee;
        width: 375px;
        height: 690px;
      "
    >
      <div
        class="rela flexcen"
        style="text-align: center; height: 40px; line-height: 40px"
      >
        <div style="max-width: 180px" class="overtxt">
          {{ this.info.courseName }}
        </div>
      </div>

      <div class="course_contain">
        <!--tab -->
        <div class="tab flex">
          <div class="tab_item rela shou" @click="activeName = 0">
            任务列表
            <div class="tab_active abso" v-if="activeName == 0"></div>
          </div>
          <div
            class="tab_item rela shou"
            @click="activeName = 1"
            style="margin-left: 54px"
          >
            课程介绍
            <div class="tab_active abso" v-if="activeName == 1"></div>
          </div>
        </div>
        <!-- 任务列表 -->
        <div class="chapters" v-if="activeName == 0">
          <el-collapse v-model="activeNames">
            <el-collapse-item
              :title="item.chapterName"
              :name="item.id"
              v-for="(item, index) in chapters"
              :key="index"
            >
              <div class="chapter flexcolcenter" slot="title">
                <div class="chapter_status_icon1"></div>
                <div style="color: #19b300" class="chapter_status_lable1">
                  学习中
                </div>
                <div class="chapter_name overtxt">
                  {{ item.chapterName }}
                </div>
                <!-- <i
                  class="header-icon el-icon-info"
                  v-if="
                    item.chapterObjectives ||
                    item.describe ||
                    item.recommendTime
                  "
                  @click.stop.native="handleChapterDetail(item)"
                ></i> -->
              </div>
              <!-- 环节 -->
              <div
                class="tasks"
                v-if="$route.query.status.includes('temporary')"
              >
                <div
                  @click.stop="handleLinkTask(item2, item)"
                  class="task flexcolcenter shou"
                  v-for="item2 in item.ccCourseTaskTemporaryList"
                  :key="item2.taskId"
                >
                  <img
                    class="task_status"
                    src="@/assets/images/mini/status1.png"
                  />
                  <!-- 是否有考核icon -->
                  <div class="examIcon" v-if="item2.examId">考</div>
                  <div class="task_name">
                    {{ item2.taskName }}
                  </div>
                </div>
              </div>
              <div class="tasks" v-else>
                <div
                  @click.stop="handleLinkTask(item2, item)"
                  class="task flexcolcenter shou"
                  v-for="item2 in item.ccCourseTaskList"
                  :key="item2.taskId"
                >
                  <img
                    class="task_status"
                    src="@/assets/images/mini/status1.png"
                  />
                  <!-- 是否有考核icon -->
                  <div class="examIcon" v-if="item2.examId">考</div>
                  <div class="task_name">
                    {{ item2.taskName }}
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <!-- 课程介绍 -->
        <div class="courseInfo" v-if="activeName == 1">
          <div class="cardContain">
            <!-- 卡片 -->
            <div class="card">
              <!-- 名字 评分 封面 -->
              <div class="card_name_rate_cover flexbet">
                <!-- 名字 评分 -->
                <div class="card_name_rate">
                  <div class="flexcolcenter card_name">
                    <div class="name overtxt">
                      {{ info.courseName }}
                    </div>
                  </div>
                  <!-- 负责老师 -->
                  <div class="flex card_item">
                    <div class="card_item_lable">训练员</div>
                    <div class="card_item_value" style="color: #ef7d00">
                      {{ info.teacherNames ? info.teacherNames : "--" }}
                    </div>
                  </div>
                  <div class="flex card_item">
                    <div class="card_item_lable">基准学时</div>
                    <div class="card_item_value">
                      <span style="color: #e95756"
                        >{{ info.studyTime ? info.studyTime : "--" }} 时</span
                      >
                    </div>
                  </div>
                </div>
                <!-- 封面 -->
                <img
                  class="coursePic"
                  :src="info.coursePic ? info.coursePic : ''"
                />
              </div>
              <!-- 学分数据 -->
              <div class="flexbet card_credit">
                <div class="card_credit_item">
                  <div class="card_credit_item_value">
                    {{ info.finishTasks ? info.finishTasks : 0 }}/{{
                      info.allTasks ? info.allTasks : 0
                    }}
                  </div>
                  <div class="card_credit_item_lable">总任务数</div>
                </div>

                <div class="card_credit_item">
                  <div class="card_credit_item_value">
                    {{ info.finishExams ? info.finishExams : 0 }}/{{
                      info.allExams ? info.allExams : 0
                    }}
                  </div>
                  <div class="card_credit_item_lable">总考核数</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 课程其他信息 -->
          <div class="course_info">
            <div class="course_info_lable">材料/设备</div>
            <div class="course_info_value" v-html="info.studyTools"></div>
            <div class="course_info_lable">课程描述</div>
            <div class="course_info_value" v-html="info.describe"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 任务详情 -->
    <courseMiniDrawerTask
      ref="courseMiniDrawerTask"
      @toStartExam="toStartExam"
      @taskBack="step = 1"
      v-show="step == 2"
      :taskId="taskId"
    ></courseMiniDrawerTask>
    <!-- 考试页面 -->
    <courseMiniDrawerPaper
      ref="courseMiniDrawerPaper"
      @toPapering="toPapering"
      @paperBack="step = 2"
      v-show="step == 3"
      :examId="examId"
      :taskName="taskName"
      :type="examType"
    ></courseMiniDrawerPaper>
    <courseMiniDrawerPapering
      ref="courseMiniDrawerPapering"
      @paperingBack="step = 2"
      v-show="step == 4"
      :examId="examingId"
      :taskName="taskName"
      :type="examType"
    ></courseMiniDrawerPapering>
  </el-drawer>
</template>
  
<script>
import courseMiniDrawerTask from "./courseMiniDrawer_task.vue";
import courseMiniDrawerPaper from "./courseMiniDrawer_paper.vue";
import courseMiniDrawerPapering from "./courseMiniDrawer_papering.vue";
import {
  queryCourseTemporary,
  getPost_course,
  getschoolCoursetraniner,
} from "@/api/course/course";
export default {
  components: {
    courseMiniDrawerTask,
    courseMiniDrawerPaper,
    courseMiniDrawerPapering,
  },
  name: "app",
  data() {
    return {
      taskName: "",
      courseId: "",
      courseTemporaryId: "",
      taskId: "",
      examId: "",
      examingId: "",
      examType: "",
      step: "",

      info: {},
      chapters: [],
      activeNames: [],
      activeName: "0",
      //该课程的状态
      chapters: [],
      info: {},
      fullShow: false,
      size: "460px",
    };
  },
  props: {
    from: [String],
    show: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    show(e) {
      if (e) {
        this.courseId = "";
        this.courseTemporaryId = "";
        this.taskId = "";
        this.examId = "";
        this.examType = "";
        this.examingId = "";
        this.activeName = 0;

        this.step = 1;
        if (this.$route.query.status.includes("temporary")) {
          this.courseTemporaryId = this.$route.query.courseTemporaryId;
        } else {
          this.courseId = this.$route.query.courseId;
        }
        this.getcourseInfo();
        console.log("from", this.from);
      }
    },
  },
  methods: {
    /* 前往开始页面 */
    toPapering(info) {
      console.log("前往开始页面", info);
      this.examingId = info.info.id;
      this.taskName = info.info.taskName;
      this.step = 4;
      this.$refs.courseMiniDrawerPapering.getPaper(this.examId);
    },
    /* 前往開始考试页面 */
    toStartExam(exam) {
      console.log("前往開始考试页面", exam);
      this.taskName = exam.taskName;
      this.examId = exam.examId;
      this.examType = exam.type;
      this.step = 3;
      this.$refs.courseMiniDrawerPaper.getPaper(this.examId);
    },
    /*点击任务 */
    handleLinkTask(task, chapter) {
      console.log("点击任务", task);
      this.taskId = task.id || task.taskId;
      this.step = 2;
      this.$refs.courseMiniDrawerTask.getTask(this.taskId);
    },
    /* 获取课程信息 */
    async getcourseInfo() {
      let res;
      this.loading = true;
      if (this.$route.query.status.includes("temporary")) {
        res = await queryCourseTemporary(this.courseTemporaryId);
        if (res.code == 200) {
          this.info = res.data;
          this.chapters =
            res.data.ccCourseChapterTypeTemporaryList[0].ccCourseChapterTemporaryList;
        }
      } else {
        res = await getPost_course(this.courseId);
        if (res.code == 200) {
          this.chapters =
            res.data.ccCourseChapterTypeList[0].ccCourseChapterList;
          this.info = res.data;
        }
      }
      if (this.from == "course_order") {
        let t = await getschoolCoursetraniner(this.$route.query.schoolCourseId);
        this.info.teacherNames = t.data.teacherNames;
      }
    },
    /* 节点点击 */
    nodeClick(node) {
      this.selectedLevel = node.level == 1 ? "chapter" : "task";
      this.selectedId = node.id;
      this.highId = node.highId;
      //dynamicTitle处理
      this.dynamicTitle = node.name;
    },
    /* 添加步骤 item为父节点*/
    async handleAddLink(item) {
      console.log(item);
      let task = {
        taskName: item.chapterName + "-步骤" + (item.children.length + 1),
        showRename: true,
        describe: "",
        taskFileTemporaries: [],
        courseTemporaryId: this.form.courseTemporaryId,
        chapterTemporaryId: item.id,
      };
      let res = await addPost_courseTask(task);
      if (res.code == 200) {
        task.id = res.data;
        this.selectedId = "task_" + res.data;
        this.selectedLevel = "task";
        // dynamicTitle处理
        this.dynamicTitle = task.taskName;
      }
      let taskNode = {
        id: res.data,
        name: task.taskName,
        showRename: true,
        level: 2,
      };
      addToChildren(this.ccCourseChapterTemporaryList, item.id, taskNode);
      // 还需要为任务添加步骤
      let res2 = await addPost_courseTaskContent({
        taskFileTemporaries: [],
        description: "",
        contentName: "",
        contentUrl: "",
        taskTemporaryId: taskNode.id,
      });
    },
    /* 添加任务 */
    async handleAddTask() {
      // 添加之前得先获取必修卡片id
      if (this.requiredTypeCardId == "") {
        let res = await listPost_chapterType({
          courseTemporaryId: this.form.courseTemporaryId,
        });
        if (res.code == 200) {
          this.requiredTypeCardId = res.rows.length > 0 ? res.rows[0].id : "";
        }
      }
      // 调取接口 然后向tree里面加任务
      let data = {
        chapterName: "任务" + (this.ccCourseChapterTemporaryList.length + 1),
        chapterTypeTemporaryId: this.requiredTypeCardId,
        courseTemporaryId: this.form.courseTemporaryId,
        ccCourseTaskTemporaryList: [],
        chapterObjectives: undefined,
        describe: undefined,
        recommendTime: undefined,
      };
      let res = await addPost_chapterTemporary(data);
      if (res.code == 200) {
        let chapterItem = {
          ...data,
          id: res.data,
          level: 1,
          showRename: true,
          name: data.chapterName,
        };
        this.ccCourseChapterTemporaryList.push(chapterItem);
        this.selectedLevel = 1;
        this.selectedId = "chapter_" + res.data;
        //dynamicTitle处理
        this.dynamicTitle = chapterItem.name;
      }
    },
    switchFullShow() {
      this.fullShow = !this.fullShow;
      if (this.fullShow) {
        this.size = "100%";
      } else {
        this.size = "460px";
      }
    },
    handleClose() {
      this.$emit("update:show", false);
    },
  },
};
</script>
  
<style scoped lang='scss'>
.course_contain {
  .tasks {
    box-sizing: border-box;
    padding: 0px 0px 25px 24px;
  }
  .task {
    height: 20px;
    margin-top: 25px;
    .task_status {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
    .examIcon {
      margin: 0 8px 0 0;
      text-align: center;
      font-size: 12px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 16px;
      width: 16px;
      height: 16px;
      background: #ea3555;
      border-radius: 3px;
    }
    .task_name {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }
  .chapter {
    padding-left: 10px;
    .chapter_status_icon1 {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #19b300;
      box-sizing: border-box;
    }
    .chapter_status_lable1 {
      margin-left: 4px;
      font-size: 10px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .chapter_name {
      text-align: left;
      margin-left: 10px;
      margin-right: 5px;
      max-width: 165px;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
    }
  }
  .tab {
    height: 44px;
    justify-content: center;
    .tab_item {
      line-height: 44px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      text-align: left;
      font-style: normal;
      .tab_active {
        left: 20px;
        bottom: -1px;
        width: 24px;
        height: 3px;
        background: conic-gradient(
          from 0deg at -1.5612511283791264e-15% 50%,
          #ff4d03 0%,
          #ff9a00 100%
        );
        border-radius: 1.5px;
      }
    }
  }
  .courseInfo {
    height: 606px;
    overflow-y: scroll;
    .card_item {
      margin-top: 8px;
      .card_item_lable {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
      }

      .card_item_value {
        width: 140px;
        margin-left: 12px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        .card_item_value_children {
          margin-right: 20px;
        }
      }
    }
    .cardContain {
      background: #fafafa;
      box-sizing: border-box;
      padding: 10px 0 47px 16px;
      .card {
        padding: 20px 20px 16px 20px;
        width: 343px;
        background: #ffffff;
        box-shadow: 0px 0px 8px 0px rgba(22, 66, 163, 0.12);
        border-radius: 8px;
        box-sizing: border-box;
        .card_name_rate_cover {
          .card_name_rate {
            margin-top: 2px;
            .card_name {
              height: 22px;
              .name {
                max-width: 200px;
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #333333;
              }
            }
          }

          .coursePic {
            width: 76px;
            height: 47px;
            border: 1px solid #fafafa;
            box-sizing: border-box;
            border-radius: 12px;
          }
        }

        .card_credit {
          padding: 0 40px;
          margin-top: 16px;
          .card_credit_item {
            text-align: center;
            .card_credit_item_value {
              font-size: 16px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #333333;
              line-height: 22px;
              text {
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 25px;
              }
            }

            .card_credit_item_lable {
              margin-top: 2px;
              font-size: 13px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 18px;
            }
          }
        }
      }
    }

    .course_info {
      padding: 20px 16px 0 16px;
      .course_info_lable {
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 20px;
      }

      .course_info_value {
        // css换行
        white-space: normal;
        word-wrap: break-word;
        word-break: break-all;
        margin-bottom: 32px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        .course_info_value_image {
          margin: 0 10px 10px 0;
          border: 1px solid #fafafa;
          height: 116px;
        }
      }
    }
  }
  .chapters {
    height: 606px;
    overflow-y: scroll;
  }
}
</style>
  